<template>
  <div style="height: 100%">
    <v-main class="grey lighten-3">
      <v-container>
        <v-row>
          <v-col cols="2">
            <v-sheet rounded="lg">
              <v-list color="transparent">
                <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="编辑"
                    placement="left"
                  >
                    <v-list-item
                      link
                      color="grey lighten-4"
                      @click="addnote"
                      style="text-align: center"
                    >
                      <v-list-item-content>
                        <v-list-item-title>
                          <el-button
                            type="primary"
                            icon="el-icon-edit"
                            circle
                          ></el-button>
                        </v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                  </el-tooltip>
                </div>
                <v-divider class="my-2"></v-divider>
                <div v-for="(item, index) in links" :key="index" link>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.title"
                    placement="left"
                  >
                    <v-list-item
                      link
                      color="grey lighten-4"
                      @click="getindex(index)"
                      style="text-align: center"
                    >
                      <v-list-item-content>
                        <v-list-item-title>
                          <el-button
                            type="warning"
                            icon="el-icon-star-off"
                            circle
                          ></el-button>
                        </v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                  </el-tooltip>
                </div>
              </v-list>
            </v-sheet>
          </v-col>

          <v-col v-if="!editnote">
            <v-sheet min-height="20vh" rounded="lg">
              <div style="padding: 20px 20px">
                <div v-if="h">
                  <div v-if="notindex == 1">
                    <h1 style="padding-bottom: 18px">
                      {{ this.links[this.index].title }}
                    </h1>
                    <v-divider class="my-2"></v-divider>
                    <h4>
                      {{ this.links[this.index].text }}
                    </h4>
                    <div
                      style="
                        text-align: center;
                        padding-top: 150px;
                        padding-bottom: 20px;
                      "
                    >
                      <div>
                        <el-button
                          type="danger"
                          :loading="addloading"
                          icon="el-icon-delete"
                          @click="deletenote"
                          circle
                        ></el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="notindex == 2">
                  <h1 style="padding-bottom: 18px">
                    {{ this.title1 }}
                  </h1>
                  <v-divider class="my-2"></v-divider>
                  <h4>
                    {{ this.text1 }}
                  </h4>
                </div>
              </div>
            </v-sheet>
          </v-col>
          <v-col v-if="editnote">
            <v-sheet min-height="20vh" rounded="lg">
              <div style="padding: 20px 20px">
                <div>
                  <h2 style="padding-bottom: 18px">编写笔记</h2>
                  <div>
                    <el-form
                      :model="ruleForm"
                      :rules="rules"
                      ref="ruleForm"
                      label-width="100px"
                      class="demo-ruleForm"
                      style="width: 100%"
                    >
                      <el-form-item label="标题" prop="title">
                        <el-input v-model="ruleForm.title"></el-input>
                      </el-form-item>
                      <el-form-item label="内容" prop="text">
                        <editor class=".editor" @edit-text="edittext"></editor>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div style="text-align: center; padding-top: 70px">
                    <div>
                      <el-button
                        type="success"
                        :loading="addloading"
                        icon="el-icon-check"
                        @click="submitForm(ruleForm)"
                        circle
                      ></el-button>
                    </div>
                  </div>
                </div>
              </div>
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </div>
</template>

<script>
import editor from "../../../components/edit.vue";
import { request } from "../../network/request";
export default {
  name: "BlogNote",
  components: { editor },
  data: () => ({
    links: [],
    index: 0,
    h: false,
    notindex: 2,
    title1: "默认标题",
    text1: "默认内容",
    editnote: false,
    addloading: false,
    ruleForm: {
      title: "",
      edittext: "",
    },
    rules: {
      title: [
        { required: true, message: "请输入标题", trigger: "blur" },
        { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
      ],
      text: [
        { required: true, message: "请输入内容", trigger: "blur" },
        {
          min: 1,
          max: 300,
          message: "长度在 1 到 300 个字符",
          trigger: "blur",
        },
      ],
    },
  }),
  created() {
    if (this.$store.state.user_islogin != true) {
      this.$router.push({
        name: "BlogIndex",
        params: { alert: true },
      });
    }
    request({
      url: "/getnote",
      method: "POST",
      data: { username: this.$store.state.user_username },
    })
      .then((res) => {
        var message = res.data.msg;
        this.h = true;
        if (message.length != 0) {
          this.index = 0;
          this.notindex = 1;
        }
        for (var i = 0; i < message.length; i++) {
          this.links.push(message[i]);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  beforeCreate() {},
  methods: {
    getindex(index) {
      this.index = index;
      if (this.editnote == true) this.editnote = false;
    },
    addnote() {
      this.editnote = !this.editnote;
    },
    edittext(text) {
      console.log(text);
      this.ruleForm.edittext = text;
    },
    successopen(text) {
      this.$message({
        showClose: true,
        message: text,
        type: "success",
      });
    },
    erropen(text) {
      this.$message({
        showClose: true,
        message: text,
        type: "error",
      });
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime = yy + "/" + mm + "/" + dd + " " + hh + ":" + mf + ":" + ss;
      return _this.gettime;
    },
    submitForm() {
      this.addloading = true;
      var date = this.getCurrentTime();
      var username = this.$store.state.user_username;
      var title = this.ruleForm.title;
      var edittext = this.ruleForm.edittext;
      var note1 = {
        id: -1,
        username: username,
        title: title,
        text: edittext,
        date: date,
      };
      // console.log(date, username, title, edittext);
      if (date == "" || username == "" || title == "" || edittext == "") {
        this.addloading = false;
        let context = "参数不全哦!";
        this.erropen(context);
        return "err";
      }
      request({
        url: "/addnote",
        method: "POST",
        data: {
          username: username,
          title: title,
          edittext: edittext,
          date: date,
        },
      })
        .then((res) => {
          this.addloading = false;
          res.data.code == "200"
            ? this.successopen(res.data.msg)
            : this.erropen(res.data.msg);
          this.links.push(note1);
          this.notindex = 1;

          console.log(this.links);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deletenote() {
      console.log(this.links[this.index].id);
      request({
        url: "/deletenote",
        method: "POST",
        data: {
          date: this.links[this.index].date,
          id: this.links[this.index].id,
          username: this.$store.state.user_username,
        },
      })
        .then((res) => {
          if (res.data.code == "200") {
            this.successopen(res.data.msg);
            this.links.splice(this.index, 1);
            if (this.links.length == 0) {
              this.notindex = 2;
            }
          } else {
            this.erropen(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="sass" scoped>
</style>